import { ConfigProvider } from '@taroify/core';
import { getTheme } from '@/config/theme';
import { createContext, useContext, useState } from 'react';
import { THEME } from '@/types';
import { View } from '@tarojs/components';

const CustomStyleContext = createContext<{ theme: THEME } | null>(null);

export function CustomTheme({ children }) {
  const initialTheme = getTheme('light');
  const [theme, setTheme] = useState(initialTheme);

  return (
    <CustomStyleContext.Provider value={{ theme }}>
      <ConfigProvider theme={theme}>
        <View className="text-sm">{children}</View>
      </ConfigProvider>
    </CustomStyleContext.Provider>
  );
}
export function useCustomTheme() {
  const context = useContext(CustomStyleContext);
  if (!context) {
    throw new Error(
      'useCustomTheme must be used within a CustomTheme provider',
    );
  }
  return context;
}
